<template>
  <swiper :options="swiperOption" ref="productSwiper">
    <swiper-slide v-for="(item, index) in groups" :key="index">
      <div class="product">
        <el-skeleton class="product-load" :loading="loading" animated :count="8">
          <template slot="template">
            <div class="product-item">
              <a>
                <div class="product-images">
                  <el-skeleton-item variant="image" style="width: 100%; height: 100%;" />
                </div>
                <div class="product-content">
                  <p class="product-name">
                    <el-skeleton-item variant="h1" />
                  </p>
                  <p class="product-describe">
                    <el-skeleton-item variant="text" style="width: 95%;" />
                    <el-skeleton-item variant="text" style="width: 85%;" />
                  </p>
                  <!-- <div class="product-btns">
                    <buttom-url src="/" size="btn-small">
                      {{ $t('product.move') }} <i class="iconfont icon-youjiantou "></i>
                    </buttom-url>
                  </div> -->
                </div>
              </a>
            </div>
          </template>
          <template>
            <div class="product-item hvr-shadow" v-for="(product, productIndex) in item" :key="productIndex">
              <a :href="'/product/ProductDetails?id=' + product.id"
                :title="product.productName + ' - ' + $t('product.list.understand')">
                <div class="product-images">
                  <img v-if="index == 0" :src="product.mainImageUrl" :alt="product.productName">
                  <img v-else v-lazy="product.mainImageUrl" :alt="product.productName">
                </div>
                <div class="product-content">
                  <p class="product-name">{{ product.productName }}</p>
                  <p class="product-describe">{{ product.shortDescription }}</p>
                  <!-- <div class="product-btns">
                    <buttom-url src="/" size="btn-small">
                      {{ $t('product.move') }} <i class="iconfont icon-youjiantou "></i>
                    </buttom-url>
                  </div> -->
                </div>
              </a>
            </div>
          </template>
        </el-skeleton>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import ButtomUrl from "@/components/Button/ButtomUrl";
import "swiper/css/swiper.min.css";

export default {
  props: {
    productList: {
      type: Array,
      required: true
    },
    pageSize: {
      type: Number,
      default: 8
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    ButtomUrl
  },
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        lazy: true
      }
    }
  },
  computed: {
    groups () {
      const result = [];
      for (let i = 0; i < this.productList.length; i += this.pageSize) {
        result.push(this.productList.slice(i, i + this.pageSize));
      }
      return result;
    },
  },
  methods: {

  }
}
</script>

<style scoped>
.product-load {
  width: 100%;
}

.product-load>>>.el-skeleton {
  display: flex;
}

.pagination {
  margin-top: 20px;
}

.product-btns {
  float: right;
}

.product-content {
  box-sizing: border-box;
  padding: 0px 10px;
}

.product-name {
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 5px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-describe {
  font-size: 14px;
  margin: 0px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin: 10px 0px;
  color: #909399;
  line-height: 20px;
  height: 38.5px;
}


.product {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: calc((100% / 4) - 10px);
  margin: 5px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  color: #000;
}

.product-item a {
  text-decoration: none;
}

.product-images {
  position: relative;
  width: 100%;
  height: 260px;
}

.product-images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.el-image>>>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.swiper-lazy-loading {
  width: 100%;
  height: 100%;
  background: #000;
}
</style>
